<!DOCTYPE html>
<html lang="en">
    {height: 100%}
    <head>
        <meta charset="utf-8" />
        <title>Google Places API - practice | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        {height: 100%;margin:0; padding:0}
        <header>
            <h2>Google Places API - practice</h2>
            
        </header>
        <p id="demo">Click the button to get your position:</p>
<button onclick="getLocation();">Try It</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }

function showPosition(position)
  {
  var latlon=position.coords.latitude+","+position.coords.longitude;

  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
  +latlon+"&zoom=14&size=400x300&sensor=false";
  document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
  mapholder.style.height='250px';
  mapholder.style.width='500px';
  }

function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation.";
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable.";
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out.";
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred.";
      break;
    }
  }
</script>
        <div id="container" class="container">
            <div id="gmap_canvas" style='height:100%' ></div>
            <div class="actions">
                <div class="button">
                    <label for="gmap_where">Where:</label>
                    <input id="gmap_where" type="text" name="gmap_where" /></div>
                <div id="button2" class="button" onclick="findAddress(); return false;">Search for address</div>
                <div class="button">
                    <label for="gmap_keyword">Keyword (optional):</label>
                    <input id="gmap_keyword" type="text" name="gmap_keyword" /></div>
                <div class="button">
                    <label for="gmap_type">Type:</label>
                    <select id="gmap_type">
                        <option value="art_gallery">art_gallery</option>
                        <option value="atm">atm</option>
                        <option value="bank">bank</option>
                        <option value="bar">bar</option>
                        <option value="cafe">cafe</option>
                        <option value="food">food</option>
                        <option value="hospital">hospital</option>
                        <option value="police">police</option>
                        <option value="store">store</option>
                    </select>
                </div>
                <div class="button">
                    <label for="gmap_radius">Radius:</label>
                    <select id="gmap_radius">
                        <option value="500">500</option>
                        <option value="1000">1000</option>
                        <option value="1500">1500</option>
                        <option value="5000">5000</option>
                    </select>
                </div>
                <input type="hidden" id="lat" name="lat" value="40.7143528" />
                <input type="hidden" id="lng" name="lng" value="-74.0059731" />
                <div id="button1" class="button" onclick="findPlaces(); return false;">Search for objects</div>
            </div>
        </div>
    </body>
</html>